<?php
/**
 * Created by IDEA.
 * User: dinesh
 * Date: Mar 25, 2012
 * Time: 5:09:30 PM
 */
     
?>


	<link rel="STYLESHEET" type="text/css" href="css/dhtmlx/grid/dhtmlxgrid.css">

    <script src="js/dhtmlx/grid/dhtmlxgrid.js"></script>
    <script src="js/dhtmlx/grid/dhtmlxgridcell.js"></script>
    <script src="js/dhtmlx/grid/ext/dhtmlxgrid_filter.js"></script>
    <script src="js/dhtmlx/grid/ext/dhtmlxgrid_srnd.js"></script>
    <script src="js/dhtmlx/grid/dhtmlxgrid_pgn.js"></script>
    
      
    <script>   
       var mygrid;
       var gridQString = "";
    function doInitGrid(){
        mygrid = new dhtmlXGridObject('products_grid');
        mygrid.setImagePath("codebase/imgs/");
        mygrid.setHeader("School Id,Name,Address");
        mygrid.setInitWidths("100,300,300");
        mygrid.setColAlign("left,left,left");
        mygrid.setSkin("default");
        mygrid.setPagingSkin("bricks");
        
       mygrid.setColSorting("server,server,server");
       // mygrid.enablePaging(mode,pageSize,pagesInGrp,pagingControlsContainer,showRecInfo,pagingStateContainer);

        mygrid.init();
        mygrid.enableSmartRendering(true);

         gridQString = "?news/pgridData";//save query string to global variable (see step 5 for details)

    mygrid.loadXML(gridQString );
         mygrid.attachEvent("onBeforeSorting",sortGridOnServer);
    }
     window.onload= doInitGrid ;
          function applyFilter(){
      mygrid.clearAll(); //remove all data
      gridQString = "?news/pgridData&name_mask="+document.getElementById("nm_mask").value;//save query string in global variable (see step 5 for details)
      mygrid.loadXML(gridQString); // load new dataset from sever with additional parameter passed
  }

       function sortGridOnServer(ind,gridObj,direct){
                     mygrid.clearAll();
                     mygrid.loadXML(gridQString+(gridQString.indexOf("?")>=0?"&":"&")+"orderby="+ind+"&direct="+direct);
                     mygrid.setSortImgState(true,ind,direct);
                     return false;
                 }
        
     </script>
 
 <div id="products_grid" style="width:720px;height:200px;"></div>
 <input type="Text" id="nm_mask">
  <input type="Button" value="Filter" onclick="applyFilter()">
